<template>
  <div class="kyview-main">
    <div class="home-container" :style="getStyle">
      <div class="content1 none-pannel h-pannel" >
        <part1 :data="data1"></part1>
      </div>
      <div class="h-row row2" >
        <div class="content2 h-pannel w66">
          <htitle class="m4" tname="成果趋势"></htitle>
          <div>

            <div class="chart-desc">
              <div style="margin-right:10px;" v-for="(bdg,idx) in tablists" :key="bdg" v-if="idx!==0">
                <span :style="{background:colors[idx-1]}" class="dot-r" ></span>
                {{bdg}}
              </div>
            </div>
            <div>
              <div v-show="data2 && data2.length>0" id="chart2" class="echart" style="width: 63vw;"></div>
              <div v-if="data2 && data2.length>0"></div>
              <NoData v-else text="暂无数据"></NoData>
            </div>
          </div>
        </div>
        <div class="content3 h-pannel w33" >
          <htitle class="m4" tname="成果总数量趋势"></htitle>
          <div>
            <div v-show="data3 && data3.length>0" id="chart3" class="echart"></div>
            <div v-if="data3 && data3.length>0"></div>
            <NoData v-else text="暂无数据"></NoData>
          </div>
        </div>
      </div>

      <div class="h-row row3">
        <div class="content4 h-pannel w33">
          <htitle tname="获奖成果级别"></htitle>
          <div>
            <div class="flxe" style="justify-content: space-around">
              <div v-show="data4 && data4.length>0" id="chart4" style="width: 320px;flex: 0" class="echart"></div>
              <div class="chart-desc" style="flex-direction: column;padding-bottom:20px;">
                <div class="chart-desc-item" v-for="(bdg,idx) in data4" :key="idx" :title="bdg.contentType">
                  <span :style="{background:colors1[idx]}" class="dot-r" ></span>
                  <span>{{bdg.contentType}}</span>
                  <span class="num">{{bdg.count}}</span>
                </div>
              </div>
            </div>
            <div v-if="data4 && data4.length>0"></div>
            <NoData v-else text="暂无数据"></NoData>
          </div>
        </div>

        <div class="content5 h-pannel w33">
          <htitle tname="论文发表等级"></htitle>
          <div>


            <div v-show="data5 && data5.length>0" id="chart5"  class="echart"></div>
<!--            <div class="flxe" style="justify-content: space-around">-->
<!--              <div v-show="data5 && data5.length>0" id="chart5"  style="width: 280px;flex: 0" class="echart"></div>-->
<!--              <div class="chart-desc" style="flex-direction: column;padding-bottom:20px;">-->
<!--                <div class="chart-desc-item" v-for="(bdg,idx) in tablists" :key="bdg" v-if="idx!==0">-->
<!--                  <span :style="{background:colors[idx-1]}" class="dot-r" ></span>-->
<!--                  <span>{{bdg}}</span>-->
<!--                  <span class="num">30</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->


            <div v-if="data5&& data5.length>0"></div>
            <NoData v-else text="暂无数据"></NoData>
          </div>
        </div>

        <div class="content6 h-pannel w33">
          <htitle tname="鉴定成果结论"></htitle>
          <div>
            <div v-show="data6 && data6.length>0" id="chart6" class="echart"></div>
            <div v-if="data6 && data6.length>0"></div>
            <NoData v-else text="暂无数据" style="margin: 0 auto;"></NoData>
          </div>

        </div>

      </div>


      <div class="h-row row3">
        <div class="content4 h-pannel w33">
          <htitle tname="学术专利类型"></htitle>
          <div>


            <div class="flxe" style="justify-content: space-around">
              <div class="chart-desc" style="flex-direction: column;padding:20px 0;">
                <div class="chart-desc-item" v-for="(bdg,idx) in data7" :key="idx">
                  <span :style="{background:colors[idx]}" class="dot-r" ></span>
                  <span>{{bdg.contentType}}</span>
                  <span class="num">{{bdg.count}}</span>
                </div>
              </div>
              <div v-show="data7 && data7.length>0" id="chart7"  style="width: 320px;flex: 0" class="echart"></div>
            </div>


            <div v-if="data7&& data7.length>0"></div>
            <NoData v-else text="暂无数据"></NoData>
          </div>
        </div>

        <div class="content5 h-pannel w33">
          <htitle tname="学术著作类别"></htitle>
          <div>
            <div v-show="data8 && data8.length>0" id="chart8" class="echart"></div>
            <div v-if="data8 && data8.length>0"></div>
            <NoData v-else text="暂无数据"></NoData>
          </div>
        </div>

        <div class="content6 h-pannel w33">
          <htitle tname="软件著作类别"></htitle>

          <div class="flxe" style="height: 270px;padding-bottom: 20px;">
            <div style="width: 100%;height: 270px;position: relative" v-if="data9 && data9.length>0">


              <dv-decoration-9 :class="item.class" :dur="item.dur" :style="item.style" v-for="(item,idx) in data9" :key="idx" :title="item.contentType||'未知'">
                <div class="dv-desc">
                  <div class="type">{{item.contentType||'未知'}}</div>
                  <div class="per">{{(item.count*100/data9allcount).toFixed(0)}}%</div>
                  <div class="count">{{item.count}}</div>
                </div>
              </dv-decoration-9>



            </div>

            <div v-if="data9 && data9.length>0"></div>
            <NoData v-else text="暂无数据" class="center"></NoData>

          </div>



        </div>

      </div>


    </div>

  </div>
</template>

<script>

import {getHomeSummary} from "@/api/achievements";
import NoData from '@/components/common/noDataPage.vue'
import part1 from './part1'
import htitle from "./htitle.vue";
import G2 from "@antv/g2";
import {mapState} from "vuex";
import {mockdata,clone,configmap,tablist} from "../achConfig";
export default {
  components: {
    part1,htitle,NoData
  },
  created () {
  },
  computed:{
    showCg(){
      return false
    },
    ...mapState('style', {
      defaultColor: ({ themeConfig }) => {
        return themeConfig.defaultColor;
      },
    }),
  },

  data () {
    return {
      tablists:tablist,
      tableHeight: '400px',
      mainHeight: 'height:88vh',
      alldata:{},
      countyealList:{},// 按年统计的数量

      aa:['#A593FE','#fab1a0','#7ed6df','#FDA7DF'],
      colors1:G2.Global.colors_pie_16,
      colors:['#1890FF','#FD6F6F','#31C67E','#ffeaa7','#A593FE','#fab1a0','#7ed6df','#FDA7DF'],
      data1:[],
      data2:[],
      maxMap:{}, // 用最大的那个数据来展示 chart2左边的纵坐标
      data3:[],
      data4:[],
      data5:[],
      data6:[],
      data7:[],
      data8:[],
      data9:[],
      data9allcount:0.0001,
      chartHeight:280,
      examChart:{},

    }
  },
  mounted () {
    this.initData()
    let mainHeight = window.innerHeight - 66 - 60 // 66 是上下padding，60 是面包屑
    this.mainHeight = 'height:' + mainHeight + 'px'
  },
  methods: {
    initData () {

      getHomeSummary().then(res=>{
        let {code ,data} = res.data
        if (code === 1) {
          //data = mockdata.data // mock 开发的数据
          this.formatData(data)
          this.initPart1()
          this.initCharts()
        }
      })

      // this.formatData(mockdata.data)
      // this.initPart1()
      // this.initCharts()
    },
    initPart1(){
      // this.alldata.a2.typeCount
      let count = 6
      let data1 = []
      for(let i=0;i<count;i++){
        let value = 0
        let key = 'a'+(i+1)
        if(this.alldata[key] && this.alldata[key].count){
          value = this.alldata[key].count
        }
        data1.push(value)
      }

      this.data1 = data1


    },
    initCharts(){
      this.getDate2('yeartypecount')
      this.getDate3('yearcount')
      this.getDate4('a5') // 获奖成果
      this.getDate5('a1')//论文发表
      this.getDate7('a3') // 学术专利3
      this.getDate9('a6') // 软件著作3

      this.getDate6('a4') // 鉴定成果 4
      this.getDate8('a2') // // 学术著作类别 type 2
    },
    formatData(list){

      this.scientificCountYearToList = list.scientificCountYearToList||[]
      let countyealMap  = {}
      let countyeartypeMap = {} // {2022:{a1:1,a2:2,a3:3},2023:{a1:1,a2:2,a3:3},}
      if(list.scientificAchievementHomeToList && list.scientificAchievementHomeToList.length>0){
        let alldata  = {}
        let arr = clone(list.scientificAchievementHomeToList)||[]

        let maxKey='a1'
        let maxvalue = 0// 最多的类型
        arr.forEach(item=>{
          let key = 'a'+item.type // a1 ~ a7
          let key2 = configmap[key].title

          alldata[key] = item
          let countyear = item.countYear || []
          countyear.forEach(yitem=>{
            let countv = (yitem && yitem.count)||0
            let year = (yitem &&yitem.year)||'未知'
            let count = countyealMap[year]||0
            count +=countv
            countyealMap[year] = count // 用于 chart3

            let obj = countyeartypeMap[year]||{a1:0,a2:0,a3:0,a4:0,a5:0,a6:0}
            let aval = obj[key]||0
            obj[key] = aval+ countv
            countyeartypeMap[year] = obj // 用于 chart2


            if(countv>maxvalue){
              maxKey = key
              maxvalue = countv
            }


          })
        })


        this.data2 = this.map2ListtypeOrder(countyeartypeMap)
        this.maxMap = {key:maxKey,maxvalue:maxvalue} // 用最大的那个数据来展示 左边的纵坐标


        this.data3 = this.map2ListOrder(countyealMap)

        this.alldata = alldata
      }


    },

    map2ListOrder(countyealMap){// 将map 格式化成list 并且根据map的key 排序
      let countyealList =[]
      for(let key in countyealMap){
        countyealList.push({label:key,count:countyealMap[key]||0})
      }
      countyealList.sort((a, b) => {
        const labelA = a.label.toUpperCase();
        const labelB = b.label.toUpperCase();
        if (labelA < labelB) {
          return -1;
        }
        if (labelA > labelB) {
          return 1;
        }
        return 0;
      });

      return countyealList
    },

    map2ListtypeOrder(countyealMap){// 将map 格式化成list 并且根据map的key 排序
      let countyealList =[]
      for(let key in countyealMap){
        let i = countyealMap[key] ||{a1:0,a2:0,a3:0,a4:0,a5:0,a6:0}
        countyealList.push({label:key,...i})
      }
      countyealList.sort((a, b) => {
        const labelA = a.label.toUpperCase();
        const labelB = b.label.toUpperCase();
        if (labelA < labelB) {
          return -1;
        }
        if (labelA > labelB) {
          return 1;
        }
        return 0;
      });

      return countyealList
    },



    getDate2(key){ // 学术著作类别 type 2

      let data = this.data2



      this.examChart[key] = new G2.Chart({
        container: 'chart2',
        forceFit: true,
        height: this.chartHeight,
        padding: [ 20, 140, 45, 20 ]
      });

      this.examChart[key].axis('label', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });


      let maxvalue = this.maxMap.maxvalue||1000

      this.tablists.forEach((alias,idx)=>{
        if(idx!==0){
          let colonm = 'a'+idx
          this.examChart[key].scale(colonm, {
            alias: alias,
            min:0,
            max:maxvalue
          });

          this.examChart[key].axis(colonm, false);// 所有的纵坐标 都不展示
        }

        this.examChart[key].axis('a1', {}); // 纵坐标只展示一个，最大值为maxvalue




      })



      this.examChart[key].tooltip({
        crosshairs: false
      });
      this.examChart[key].legend({
         visible: false, // 设置图例不可见
      });

      this.examChart[key].source(data)

      this.examChart[key].line().position('label*a1').color(this.colors[0]).shape('smooth');;
      this.examChart[key].line().position('label*a2').color(this.colors[1]).shape('smooth');;
      this.examChart[key].line().position('label*a3').color(this.colors[2]).shape('smooth');;
      this.examChart[key].line().position('label*a4').color(this.colors[3]).shape('smooth');;
      this.examChart[key].line().position('label*a5').color(this.colors[4]).shape('smooth');;
      this.examChart[key].line().position('label*a6').color(this.colors[5]).shape('smooth');;



      this.examChart[key].guide().dataMarker({
        top: true,
        // position: [ '2016-02-28', 9 ],
        lineLength: 30,
        style: {
          text: {
            textAlign: 'left',
            fontSize: 12,
            stroke: this.defaultColor,
            lineWidth: 2,
            fontWeight: 10
          }
        }
      });
      this.examChart[key].guide().dataMarker({
        top: true,
        lineLength: 30,
        style: {
          text: {
            textAlign: 'left',
            fontSize: 12,
            lineWidth: 2,
            fontWeight: 10
          },
        }
      });
      this.examChart[key].render();



    },

    getDate3(key){ // 学术著作类别 type 2

      let data = this.data3

      this.examChart[key] = new G2.Chart({
        container: 'chart3',
        forceFit: true,
        height: this.chartHeight,
        padding: [ 20, 80, 50, 30 ]
      });
      this.examChart[key].source(data);
      this.examChart[key].scale('count', {
        alias: '数量'
      });
      this.examChart[key].scale('label', {
        range: [ 0, 1 ],
        tickCount: 10,
        type: 'timeCat'
      });
      this.examChart[key].axis('label', {
        label: {
          textStyle: {
            fill: this.defaultColor
          },
          formatter: text => {
            return new Date(text).getFullYear()
          }
        }
      });
      this.examChart[key].axis('count', {
        label: {
          textStyle: {
            fill: this.defaultColor
          },
          formatter: text => {
            return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
          }
        }
      });
      this.examChart[key].tooltip({
        crosshairs: 'y',
        share: true
      });
      this.examChart[key].legend({
        attachLast: true
      });
      this.examChart[key].guide()

      this.examChart[key].line().position('label*count');
      this.examChart[key].area().position('label*count');
      this.examChart[key].render();
    },

    getDate4(key){ // 获奖成果 type 5
      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

      this.data4 = this.alldata[key].typeCount||[]


      let defaultcolor = this.defaultColor



      let allcount = 0
      let other = 0
      let data9 =[]
      let maxIdx = this.data4.length>6?5:6

      this.data4.forEach((item,idx)=>{
        if(item && item.count){
          allcount+=item.count
        }
        if(idx<maxIdx){
          data9.push({
            ...item
          })
        }else {
          other+=item.count
        }
      })
      if(other>0){
        data9.push({
          contentType:'其他',
          count:other
        })
      }

      let data =data9.map(item=>{
        let p = (item.count/allcount).toFixed(2)
        debugger
        item.percent = Number(p)
        return item
      })

      this.data4 = data


      this.examChart[key] = new G2.Chart({
        container: 'chart4',
        forceFit: true,
        height: this.chartHeight+50,
        animate: false
      });
      this.examChart[key].source(data, {
        percent: {
          formatter: val => {
            val = (val * 100).toFixed(0) + '%';
            return val;
          }
        }
      });
      this.examChart[key].legend(false);
      this.examChart[key].coord('theta', {
        radius: 1,
        innerRadius: 0.4
      });
      this.examChart[key].tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
// 辅助文本
      this.examChart[key].guide().html({
        position: [ '38%', '38%' ],
        html: `<div style="color:${defaultcolor};font-size: 14px;text-align: center;">获奖成果<br><span style="color:${defaultcolor};font-size:20px">${allcount.toFixed(0)}</span></div>`,
        alignX: 'middle',
        alignY: 'middle'
      });

      this.examChart[key].tooltip({
        showTitle: false
      });
      const interval = this.examChart[key].intervalStack()
      .position('percent')
      .color('contentType',this.colors1)
      .label('percent', {
        offset: -18,
        textStyle: {
          textAlign: 'center',
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, .45)',
          fill: '#fff'
        },
        formatter: (val, item) => {
          return val
          // return item.point.contentType + ': ' + val;
        }
      })
      .tooltip('contentType*percent', (item, percent) => {
        percent = (percent * 100).toFixed(0) + '%';
        return {
          name: item,
          value: percent
        };
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      });



      this.examChart[key].tooltip({
        useHtml:true,
        htmlContent:function(title,items) {
          let item = items[0]||{}
          let name = item.name
          let percent = item.value
          let count = item.point.point.count

          let color=item.color
          let dot = `<span style="width:8px;height:8px;background:${color};margin-bottom: 2px;border-radius:1px;margin-right:10px;display:inline-block"></span>`
          return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
              + '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+dot+name
              +'</div>'
              + '<ul class="g2-tooltip-list" ><li><span style="margin-left: 18px;">百分比：</span><span style="padding-left:26px">'+ percent +'<span></li>'
              +'<li><span style="display: inline-block; width: 56px;margin-left: 18px;">数量：</span><span style="padding-left:26px">'+count+'</span></li></ul>'
              + '</div>'

        }
      })






      this.examChart[key].render();
      interval.setSelected(data[0]);

    },


    getDate5(key){ // 论文发表1
      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

      this.data5 = this.alldata[key].typeCount||[]



      let defaultcolor = this.defaultColor


      let allcount = 0
      let data9 = []
      let other = 0
      let maxIdx = this.data5.length>6?5:6
      this.data5.forEach((item,idx)=>{
        if(idx<maxIdx){
          data9.push({
            ...item
          })
        }else {
          other+=(item.count)||0
        }
        allcount+=(item.count)||0

      })

      if(other>0){
        data9.push({
          contentType:'其他',
          count:other
        })
      }


      let data = data9



      this.examChart[key] = new G2.Chart({
        container: 'chart5',
        forceFit: true,
        height: this.chartHeight+10,
        padding: [ 40, 0 ,40,68]
      });

      this.examChart[key].source(data);
      this.examChart[key].coord('polar', {
        startAngle: Math.PI, // 起始角度
        endAngle: Math.PI * (3 / 2) // 结束角度
      });
      this.examChart[key].interval()
      .position('contentType*count')
      .color('contentType', 'rgb(252,143,72)-rgb(255,215,135)')
      .label('count', {
        offset: -15,
        label: {
          textAlign: 'center',
          fill: defaultcolor
        }
      })
      .style({
        lineWidth: 1
      });


      this.examChart[key].tooltip({
        useHtml:true,
        htmlContent:function(title,items){
          let name = items[0].name
          let value = items[0].value
          let color=items[0].color
          let dot = `<span style="width:8px;height:8px;background:${color};margin-bottom: 2px;border-radius:1px;margin-right:10px;display:inline-block"></span>`

          return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
              + '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+dot+name
              +'</div>'
              + '<ul class="g2-tooltip-list" ><li><span style="margin-left: 18px;">百分比：</span><span style="padding-left:26px">'+(value*100/allcount).toFixed(0) +'%<span></li>'
              +'<li><span style="display: inline-block; width: 56px;margin-left: 18px;">数量：</span><span style="padding-left:26px">'+value+'</span></li></ul>'
              + '</div>'
        }
      })

      this.examChart[key].render();




    },

    getDate7(key){ // 学术专利
      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

      this.data7 = this.alldata[key].typeCount||[]
      let colors = this.colors

      let data = [
        {
          contentType: 'male1',
          value: 50
        },
        {
          contentType: 'middle',
          value: 25
        }
      ];

      let allcount = 0.001
      let data7map = {}
      this.data7.forEach(item=>{
        if(item.count){
          allcount+=item.count
        }
        let key = item.contentType
        data7map[key] = item.count

      })

      data = this.data7.map(item=>{
        let percent = 0
        if(item.count){
          let percent = (item.count*100/allcount).toFixed(0)
          item.value =  Number(percent)
        }
        return item
      })



      this.examChart[key] = new G2.Chart({
        container: 'chart7',
        forceFit: true,
        height: 280,
        padding: 0
      });
      this.examChart[key].source(data, {
        value: {
          min: 0,
          max: 100
        }
      });
      this.examChart[key].legend(false);
      this.examChart[key].axis(false);
      this.examChart[key].interval()
      .position('contentType*value')
      .color('contentType',this.colors)
      .shape('liquid-fill-gauge')
      .style({
        lineWidth: 10,
        opacity: 0.75
      });

      this.examChart[key].tooltip({
        useHtml:true,
        htmlContent:function(title,items) {
            let item = items[0]||{}
            let name = item.name
            let percent = item.value
            let count = data7map[name]||0

            let color=item.color
            let dot = `<span style="width:8px;height:8px;background:${color};margin-bottom: 2px;border-radius:1px;margin-right:10px;display:inline-block"></span>`
            return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
                + '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+dot+name
                +'</div>'
                + '<ul class="g2-tooltip-list" ><li><span style="margin-left: 18px;">百分比：</span><span style="padding-left:26px">'+ percent +'%<span></li>'
                +'<li><span style="display: inline-block; width: 56px;margin-left: 18px;">数量：</span><span style="padding-left:26px">'+count+'</span></li></ul>'
                + '</div>'

        }
      })

      data.forEach(row => {
        this.examChart[key].guide().text({
          top: true,
          position: {
            contentType: row.contentType,
            value: 50
          },
          content: `${row.value}%`,
          style: {
            colors: this.defaultColor,
            opacity: 0.75,
            fontSize: 18,
            textAlign: 'center'
          }
        });
      });

      this.examChart[key].render();


    },

    getDate9(key){ // 软件著作
      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

     let  data = this.alldata[key].typeCount||[]


      let dvdata =[
        {dur:8,style:'top: 31px;left: 6vw',class:'big-ra ab'},
        {dur:8,style:'top: 114px;left: 15vw',class:'big-ra ab'},
        {dur:30,style:'top: -33px;left: 15vw',class:'little-ra ab'},
        {dur:30,style:'top: 171px;left: 3vw',class:'little-ra ab'},
        {dur:30,style:'top: 30px;left: 23vw',class:'little-ra ab'},
        {dur:30,style:'top: 0px;left: 0vw',class:'little-ra ab'}
      ]




      let other = 0
      let allcount= 0
      let data9 =[]
      let maxIdx = data.length>6?5:6
      data.forEach((item,idx)=>{
        if(idx<maxIdx){
          let dv = dvdata[idx]
          data9.push({
            ...dv,
            ...item
          })
        }else {
          other+=(item.count)||0
        }
        allcount+=(item.count)||0
      })

      if(other>0){
        let dv = dvdata[5]
        data9.push({
          ...dv,
          contentType:'其他',
          count:other
        })
      }


      this.data9 = data9
      this.data9allcount = allcount+0.000001





    },




    getDate6(key){ // 鉴定成果 type 4

      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

      this.data6 = this.alldata[key].typeCount||[]

      let allcount  = 0.0001
      this.data6.forEach(item=>{
        allcount += (item && item.count)||0
      })

      let data = this.data6

      this.examChart[key] = new G2.Chart({
        container: 'chart6',
        forceFit: true,
        height: this.chartHeight,
        padding: [ 20, 20, 20, 20 ]
      });


      this.examChart[key].source(data, {
        count: {
          formatter: val => {
            return val;
          }
        }
      });
      this.examChart[key].coord('theta', {
        radius: 0.7
      });
      this.examChart[key].legend('contentType',false)
      this.examChart[key].tooltip({
        useHtml:true,
        htmlContent:function(title,items){
          let point = items[0].point.point
          let color=items[0].color
          let dot = `<span style="width:8px;height:8px;background:${color};margin-bottom: 2px;border-radius:1px;margin-right:10px;display:inline-block"></span>`

          return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
              + '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+dot+point.contentType
              +'</div>'
              + '<ul class="g2-tooltip-list" ><li><span style="margin-left: 18px;">百分比：</span><span style="padding-left:26px">'+(point.count*100 /allcount ).toFixed(0) +'%<span></li>'
              +'<li><span style="display: inline-block; width: 56px;margin-left: 18px;">数量：</span><span style="padding-left:26px">'+point.count+'</span></li></ul>'
              + '</div>'
        }
      })



      this.examChart[key].intervalStack()
      .position('count')
      .color('contentType',this.colors)
      .label('count', {
        textStyle: {
          fill: this.defaultColor // 设置标签的字体颜色为红色
        },
        formatter: (val, item) => {
          return item.point.contentType + ': ' + val+' 份 ';
        }
      })
      // .style({
      //   lineWidth: 1,
      //   stroke: '#fff'
      // });
      this.examChart[key].render();


    },


    getDate8(key){ // 学术著作类别 type 2

      if(!(this.alldata[key] && this.alldata[key].typeCount)){ // 如果没有学术著作 的数据那么不执行
        return
      }

      this.data8 = this.alldata[key].typeCount||[]
      this.examChart[key] = new G2.Chart({
        container: 'chart8',
        forceFit: true,
        height: this.chartHeight,
        padding: [ 20, 20, 50, 30 ]
      });
      this.examChart[key].source(this.data8);
      this.examChart[key].scale('count', {
        alias: '数量'
      });
      this.examChart[key].axis('contentType', {
        label: {
          formatter: function(val) {
            return val.split(' ').join('\n'); // 格式化坐标轴显示文本
          }
        },
        textStyle: {
          fill: this.defaultColor // 设置标签的字体颜色为红色
        },
      });
      this.examChart[key].axis('count', {
        label: {
          textStyle: {
            fill: this.defaultColor, // 设置刻度字体的颜色为红色
          }
        }
      });
      this.examChart[key].interval().position('contentType*count')
      // 绘制的图表
      this.examChart[key].render()
      //this.overflowResize()


    },

    getStyle () {
      let innerHeight = window.innerHeight
      let heigt = 'height:' + (innerHeight - 160) + 'px;'
      return heigt
    }

  }
}
</script>

<style>
.home-container{
  cursor: default;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
}

.kyview-main{
  padding: 0px;
  background: var(--default-bgcolor)!important;
}
.h-row{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.h-row /deep/ .graphText{
  text-align: center;
}

.h-pannel{
  overflow: hidden;
  padding: 0 20px;
  margin: 10px;
  background-color:var(--card-body-bgcolor);
  min-height: 60px;
  border-radius:12px;
}
.h-row .h-pannel:first-child{
  margin-left: 0vw;
}
.h-row .h-pannel:last-child{
  margin-right: 0px;
}

.none-pannel{
  background-color: rgba(21, 25, 33, 0.01);
  border:0px solid;
  padding: 0px;
  margin: 10px 0;
}
.row3{

}

.w66{
  flex-basis: calc(66.6% + 20px);
}
.w33{
  flex-basis: 33.3%;
}
.w50{
  width: 50%;
}

.zy-icon{
  width: 60px;
  height: 60px;
}

.zy-name{
  width: 55px;
  margin-right: 10px;
  color:#c9d1d9;
  font-size:15px;

}
.zy-progress{

}
.zy-text{
  margin-left: 20px;
  width: 60px;
  color:#3a85ff;
  font-size:14px;
}

.part6{
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;

}
/*.flex-center{*/
/*  width: 100%;*/
/*  margin-top: 20px;*/

/*}*/

.zy-pro{
  display: flex;
  flex-direction: row;
}
.s-a-type{
  width: 200px !important;
  position: absolute;
  top: 10px;
  right: 10px;
}
.p-rela{
  position: relative;

}
.m4{
  margin-left: 4px;
}
.content7{
  margin:10px 0 0 0 !important;
}

.m4{
  margin-top: -5px !important;
}
.kyview-main /deep/ .def-wrap{
  height: 260px;
  width: 100%;
  margin: 0 auto;
}

.chart-desc{
  float: right;
  margin-top: -36px;
  display: flex;
  justify-content: center;
}


.chart-desc .chart-desc-item{
  width: 8vw;
  max-width: 180px;
  min-width: 100px;
  background: var(--home-task-bgcolor);
  padding: 6px;
  margin-bottom: 4px;
  border-radius: 4px;
}


.echart{
  height: 280px;
  width: 28vw;
  margin-top: -20px;
  margin-bottom: 6px;
}
.dot-r{
  border-radius: 10px;
  height:8px;
  width: 8px;
  display: inline-block;
  margin-left: 12px;
  margin-right: 2px;
}
.flxe{
  display: flex;
  justify-content: space-between;
}

/deep/ circle{
  stroke:red;
}
.fdc{
  flex-direction: column;
}
.h100{
  height: 100;
}


circle {
  stroke: #3aa0ff !important;
}

use{
  fill:  #68adfd !important;
  stroke: #68adfd10 !important;
}


.little-ra circle {
  stroke: #68adfd88 !important;
}

.little-ra use{
  fill:  #68adfd88 !important;
  stroke: #68adfd88 !important;
}



.little-ra{
  width: 90px !important;
  height: 90px !important;
}
.big-ra{
  width: 150px !important;
  height: 150px !important;
}

.ab{
  position: absolute !important;
}
.pt20{
  padding:  40px 0 ;
}

.chart-desc .chart-desc-item .num{
  margin-right: 20px;
  float: right;
  font-weight: 550;

}


.dv-desc{
  text-align: center;
  padding-top: 10px;
  z-index: 999;
  background: #cfe7ffaa;
  border-radius: 100px;
  height: 90px;
  width: 90px;
}
.dv-desc .type{
  z-index: 999;
  font-weight: 550;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dv-desc .per{
  color: #3aa0ff;
}
.dv-desc .count{
  font-weight: 600;
}


.little-ra .dv-desc{
  transform: scale(0.75);
}
.kyview-main .center{
  margin: 0 auto;
  text-align: center;
}


@media (max-width: 1500px) {
  .chart-desc {
    display: none;
  }
}

</style>
